<template>
	<div>
		<breadcrumb></breadcrumb>
		<!-- 在途运单-详情 -->
		<div class="titleBox" v-if="result.wayDetailInfoVo != undefined">
			<!-- icon-dingdan -->
			<div class="iconfontcolor icon-dingdan"></div>
			<div class="infoBox" v-if="result.wayDetailInfoVo != undefined">
				<!-- PAYING(3, "等待付款"),
        PAID(4, "已付款"),
        SHIPMENTING(5, "发货中"),
        SHIPMENTED(6, "已发货"),
        WAITING_PAY(7, "等待到付"),
        TO_SIGN(8, "待签收"),
        WAITING_RECEIPT(9, "等待签收回单"),
        SIGNED(10, "已签收"),
        -->
				<div class="info_line1">
					<h3 class="tit">{{ result.wayDetailInfoVo.orderNo }}</h3>
					<div class="tag" v-if="result.wayDetailInfoVo.transportStatus == 9 &&
            result.waybillAuditInfoVo.waybillAuditResult == 0
            ">
						等待付款
					</div>
					<div class="tag" v-if="(result.wayDetailInfoVo.transportStatus == 9 &&
            result.waybillAuditInfoVo.waybillAuditResult == 3) ||
            result.waybillAuditInfoVo.waybillAuditResult == 2
            ">
						已完成
					</div>
					<div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 8">
						已送达
					</div>
					<div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 7">
						运输中
					</div>
					<div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 6">
						装运完成
					</div>
					<div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 5">
						待装运
					</div>
					<div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 4">
						已发货
					</div>
					<div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 3">
						部分发货
					</div>
					<div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 2">
						未发货
					</div>
					<div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 1">
						无需配送
					</div>
				</div>
				<div class="info_line2">
					<div style="margin-right: 15px">
						业务类型：{{ result.wayDetailInfoVo.orderTypeStr }}
					</div>
					<div>司机姓名：{{ result.waySEAddressInfoVo.driverName }}</div>
				</div>
			</div>
			<button class="examineBtn" v-if="result.wayDetailInfoVo.transportStatus == 9 &&
        result.waybillAuditInfoVo.waybillAuditResult == 0
        " @click="isShowAudit()">
				<i class="iconfont icon-hetongguanli2"></i>
				<span>返回</span>
			</button>
		</div>
		<!-- tabs切换 -->
		<div class="main">
			<el-tabs v-model="activeName" class="mainTabs" @tab-click="handleClick">
				<el-tab-pane label="运单信息" name="first">
					<div class="main_item" v-if="result.wayDetailInfoVo != undefined">
						<titleVue :title="'运单信息'"></titleVue>
						<el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
              color: '#939393',
              fontSize: '12px',
              fontWeight: 'bold',
              marginRight: '20px',
            }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
							<el-descriptions-item label="订单编号">{{
                result.wayDetailInfoVo.orderNo
              }}</el-descriptions-item>
							<el-descriptions-item label="项目名称">{{
                result.wayDetailInfoVo.projectName
              }}</el-descriptions-item>
							<el-descriptions-item label="计价方式">
								{{ result.wayDetailInfoVo.pricingMethodStr }}
							</el-descriptions-item>
							<el-descriptions-item label="计量单位">{{
                result.wayDetailInfoVo.measureUnitStr
              }}</el-descriptions-item>
							<el-descriptions-item label="运量">{{
                result.wayDetailInfoVo.cargoWeight
              }}</el-descriptions-item>
							<el-descriptions-item label="联系电话">{{
                result.wayDetailInfoVo.contact
              }}</el-descriptions-item>
							<el-descriptions-item label="车牌号">{{
                result.wayDetailInfoVo.numberplate
              }}</el-descriptions-item>
							<el-descriptions-item label="车辆类型" :span="2">{{
                result.wayDetailInfoVo.vehicleType || '无'
              }}</el-descriptions-item>

							<el-descriptions-item label="品牌型号">{{
                result.wayDetailInfoVo.brandModel
              }}</el-descriptions-item>
							<el-descriptions-item label="规格">{{
                result.wayDetailInfoVo.specification
              }}</el-descriptions-item>
							<el-descriptions-item label="车辆照片">
								<div class="picBox">
									<el-image class="pic" :src="result.wayDetailInfoVo.carFortyFive"
										:preview-src-list="[result.wayDetailInfoVo.carFortyFive]">
									</el-image>
								</div>
							</el-descriptions-item>
							<el-descriptions-item label="司机照片">
								<div class="picBox">
									<el-image class="pic" :src="result.wayDetailInfoVo.driverPhoto"
										:preview-src-list="[result.wayDetailInfoVo.driverPhoto]">
									</el-image>
								</div>
							</el-descriptions-item>
						</el-descriptions>
					</div>
					<div v-if="orderInfoUpdateRecord" style="margin-left: 2%;">
						<titleVue :title="'驳回信息'"></titleVue>
						<el-table :data="orderInfoUpdateRecord" style="width: 100%">
							<el-table-column prop="pricingMethod" label="计价方式" width="100">
								<template slot-scope="scope">
									<div v-if="scope.row.pricingMethod == 1">
										按里程
									</div>
									<div v-if="scope.row.pricingMethod == 2">
										按量
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="measureUnit" label="计量单位" width="100">
								<template slot-scope="scope">
									<div v-if="scope.row.measureUnit == 1">
										车
									</div>
									<div v-if="scope.row.measureUnit == 2">
										吨
									</div>
									<div v-if="scope.row.measureUnit == 3">
										件
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="cargoWeight" label="运量" width="100">
							</el-table-column>
							<el-table-column prop="ownerUnitPrice" label="货主单价" width="100">
							</el-table-column>
							<el-table-column prop="totalAmount" label="货主金额" width="100">
							</el-table-column>
							<el-table-column prop="transUnitPrice" label="司机单价" width="100">
							</el-table-column>
							<el-table-column prop="contractorAmount" label="司机运费" width="100">
							</el-table-column>
							<el-table-column label="驳回附件">
								<template slot-scope="scope">
									<div @click="showFile(scope.row.attachment)"
										style="color: rgb(39, 127, 241);font-size: 15px;cursor: pointer;">
										{{ scope.row.attachment }}</div>
								</template>
							</el-table-column>
							<el-table-column prop="remark" label="驳回备注">
							</el-table-column>
							<el-table-column prop="createTime" label="驳回编辑时间">
							</el-table-column>

						</el-table>
					</div>


				</el-tab-pane>
				<el-tab-pane label="运费信息" name="second">
					<div class="main_item" v-if="result.wayPriceInfoVo != undefined">
						<titleVue :title="'运费信息'"></titleVue>

						<el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
              color: '#939393',
              fontSize: '12px',
              fontWeight: 'bold',
              marginRight: '20px',
            }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
							<el-descriptions-item
								label="司机单价">{{ result.wayPriceInfoVo.unitPrice }}元</el-descriptions-item>
							<el-descriptions-item
								label="司机运费">{{ result.wayPriceInfoVo.freight }}元</el-descriptions-item>
							<el-descriptions-item label="搬运费">{{
                result.wayPriceInfoVo.handlingAmount == null
                ? "0"
                : result.wayPriceInfoVo.handlingAmount
              }}元
							</el-descriptions-item>
							<el-descriptions-item label="过路费">{{
                result.wayPriceInfoVo.tollAmount == null
                ? "0"
                : result.wayPriceInfoVo.tollAmount
              }}元</el-descriptions-item>
							<el-descriptions-item label="停车费">{{
                result.wayPriceInfoVo.parkingAmount == null
                ? "0"
                : result.wayPriceInfoVo.parkingAmount
              }}元</el-descriptions-item>
							<el-descriptions-item label="等候费">{{
                result.wayPriceInfoVo.waitingAmount == null
                ? "0"
                : result.wayPriceInfoVo.waitingAmount
              }}元</el-descriptions-item>
							<el-descriptions-item label="小费">{{
                result.wayPriceInfoVo.tipAmount == null
                ? "0"
                : result.wayPriceInfoVo.tipAmount
              }}元</el-descriptions-item>
							<el-descriptions-item label="司机金额">{{
                result.wayPriceInfoVo.driverAmount == null
                ? "0"
                : result.wayPriceInfoVo.driverAmount
              }}元</el-descriptions-item>
						</el-descriptions>
					</div>
				</el-tab-pane>
				<el-tab-pane label="时间信息" name="third">
					<div class="main_item" v-if="result.wayTimeInfoVo != undefined">
						<titleVue :title="'时间信息'"></titleVue>
						<el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
              color: '#939393',
              fontSize: '12px',
              fontWeight: 'bold',
              marginRight: '20px',
            }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
							<el-descriptions-item label="订单发布时间">{{
                result.wayTimeInfoVo.createTime || '--.--'
              }}</el-descriptions-item>
							<el-descriptions-item label="订单截止时间" :span="2">{{
                result.wayTimeInfoVo.endTime || '--.--'
              }}</el-descriptions-item>
							<el-descriptions-item label="发货时间">{{
                result.wayTimeInfoVo.startTime || '--.--'
              }}</el-descriptions-item>
							<el-descriptions-item label="送达时间">{{
                result.wayTimeInfoVo.finishTime || '--.--'
              }}</el-descriptions-item>
							<el-descriptions-item label="司机接单时间">{{
                result.wayTimeInfoVo.createTime || '--.--'
              }}</el-descriptions-item>
							<el-descriptions-item label="司机启运时间">{{
                result.wayTimeInfoVo.runBeginTime || '--.--'
              }}</el-descriptions-item>
							<el-descriptions-item label="司机到达时间">{{
                result.wayTimeInfoVo.arrivalTime || '--.--'
              }}</el-descriptions-item>
							<el-descriptions-item label="司机回单时间">{{
                result.wayTimeInfoVo.receiptBackTime || '--.--'
              }}</el-descriptions-item>
						</el-descriptions>
					</div>
				</el-tab-pane>
				<el-tab-pane label="收发货信息" name="fourth">
					<div class="main_item" v-if="result.waySEAddressInfoVo != undefined">
						<titleVue :title="'收发货信息'"></titleVue>
						<div class="ShippingReceiving_head">
							<div class="info_item">
								<div class="label">线路名称:</div>
								<div class="value">
									<span class="text">{{
                    result.waySEAddressInfoVo.lineName || '无'
                  }}</span>
								</div>
							</div>
							<div class="info_item" style="margin-left: 242px">
								<div class="label">距离(公里):</div>
								<div class="value">
									<span class="text">{{
                    result.waySEAddressInfoVo.totalDistant || '无'
                  }}</span>
								</div>
							</div>
						</div>
						<div class="list">
							<el-table style="width: 100%" header-align="left" :data="records"
								:header-cell-style="tableHeaderStyle" :row-class-name="rowStyle" border>
								<el-table-column align="left" prop="" label="运单状态">
									{{ result.waySEAddressInfoVo.transportStatusStr }}
								</el-table-column>
								<el-table-column align="left" prop="" label="运单编号">
									<template>
										<div>
											<el-button type="text" size="small"></el-button>
											{{ result.waySEAddressInfoVo.waybillNo }}
										</div>
									</template>
								</el-table-column>
								<el-table-column align="left" prop="" label="司机姓名">
									{{ result.waySEAddressInfoVo.driverName }}
								</el-table-column>
								<el-table-column align="left" prop="" label="车辆信息">
									{{ result.waySEAddressInfoVo.numberplate }}
								</el-table-column>
								<el-table-column align="left" prop="" label="发货地" min-width="180">
									<template>
										<div v-if="result.waySEAddressInfoVo.startAddress.length != 0">
											<div v-for="(item, i) in result.waySEAddressInfoVo.startAddress" :key="i">
												{{ item }}</div>
										</div>
										<div v-else>无</div>
									</template>
								</el-table-column>
								<el-table-column align="left" prop="" label="目的地" min-width="180">
									<template>
										<div v-if="result.waySEAddressInfoVo.endAddress.length != 0">
											<div v-for="(item, i) in result.waySEAddressInfoVo.endAddress" :key="i">
												{{ item }}</div>
										</div>
										<div v-else>无</div>
									</template>
								</el-table-column>
								<el-table-column align="left" prop="" label="货物数量">
									{{ result.waySEAddressInfoVo.cargoQuantity }}
								</el-table-column>
								<!-- <el-table-column align="left" prop="" label="司机运费">
                  {{ result.waySEAddressInfoVo.unitPrice }}
                </el-table-column>
                <el-table-column align="left" prop="otherAmount" label="其他费用">
                  <template slot-scope="scope">
                    <div>{{ scope.row.otherAmount || '无' }}</div>
                  </template>
                </el-table-column> -->
								<el-table-column align="left" prop="" label="接单时间">
									{{ result.waySEAddressInfoVo.createTime }}
								</el-table-column>
								<el-table-column align="left" label="货物明细">
									<template>
										<div>
											<el-button type="text" size="small" @click="showDialog()">查看</el-button>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<!-- 地图 -->
		<div class="infoMainBox">
			<titleVue :title="'线路信息'" :iconName="'icon-xianluxinxi'"></titleVue>
			<div class="MapBox">
				<iframe src="/line.html" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="100%"
					height="340" ref="iframe"></iframe>
			</div>
			<titleVue :title="'节点信息'" :elIconName="'el-icon-location-outline'"></titleVue>
			<div class="steps">
				<el-steps direction="vertical">
					<el-step v-for="item in result.nodeInfoObject" :key="item.id">
						<!-- 自定义步骤图标 -->
						<template slot="icon">
							<div class="CircleDian"></div>
						</template>
						<!-- 自定义标题 -->
						<template slot="title">
							<div class="stepTitle">{{ item.remark }}</div>
						</template>
						<!-- 自定义内容 -->
						<template slot="description">
							<div class="stepContent">
								<div class="dateTime">{{ item.createTime }}</div>
								<!-- 判断对象中是否有指定属性名picArr,有则返回true 反之false -->
								<div class="picBox" v-if="item.url != null && item.url != ''">
									<div class="picTitle">图片:</div>
									<div class="pic_item" v-for="picItem in item.url" :key="picItem">
										<el-image class="pic" :src="picItem" :preview-src-list="item.url">
										</el-image>
									</div>
								</div>
							</div>
						</template>
					</el-step>
				</el-steps>
			</div>
			<template v-if="result.waybillAuditInfoVo != undefined">
				<div v-if="result.waybillAuditInfoVo.waybillAuditResult != 0 &&
          result.waybillAuditInfoVo.waybillAuditResult != null
          ">
					<titleVue :title="'审核信息'" :iconName="'icon-shenhexinxi'"></titleVue>
					<div class="AuditInfoBox">
						<div class="AuditInfo_head">
							<div class="info_item">
								<div class="label">审核结果:</div>
								<div class="value" v-if="result.waybillAuditInfoVo.waybillAuditResult == 0">
									<i class="iconfontcolor icon-dairenzheng iconStyle"></i>
									<span style="color: #32cf84">未审核</span>
								</div>
								<div class="value" v-if="result.waybillAuditInfoVo.waybillAuditResult == 3">
									<i class="iconfontcolor icon-hegui iconStyle"></i>
									<span style="color: #32cf84">合规</span>
								</div>
								<div v-if="result.waybillAuditInfoVo.waybillAuditResult == 1" class="value">
									<i class="iconfontcolor icon-zuofei iconStyle"></i>
									<span style="color: #f5222d">作废</span>
								</div>
								<div v-if="result.waybillAuditInfoVo.waybillAuditResult == 2" class="value">
									<i class="iconfontcolor icon-youyichang iconStyle"></i>
									<span style="color: #f9aa0d">有异常</span>
								</div>
							</div>
							<div class="info_item">
								<div class="label">
									审核说明:{{ result.waybillAuditInfoVo.resultInfo }}
								</div>
								<div class="value">
									{{
                    result.waybillAuditInfoVo.resultInfo
                    ? result.waybillAuditInfoVo.resultInfo
                    : "无"
                  }}
								</div>
							</div>
							<div class="info_item">
								<div class="label">审核人:</div>
								<div class="value">
									{{ result.waybillAuditInfoVo.auditUser }}
								</div>
							</div>
							<div class="info_item">
								<div class="label">审核时间:</div>
								<div class="value">
									{{ result.waybillAuditInfoVo.resultTime }}
								</div>
							</div>
							<div class="info_item">
								<div class="label">审核附件:</div>
								<el-button type="text" size="small" v-if="result.waybillAuditInfoVo.auditUrls"
									@click.native="goUrl(result.waybillAuditInfoVo.auditUrls)">点击查看附件</el-button>
								<div v-else>无</div>
							</div>
						</div>

						<!--  <div class="list">
          <el-table style="width: 100%" header-align="left" :data="records">
          
            <el-table-column align="left" prop="" label="司机修正运量">
              {{ result.waybillAuditInfoVo.amendWeight }}
            </el-table-column>
            <el-table-column align="left" prop="" label="审核确定运量">
              {{ result.waybillAuditInfoVo.amendWeight }}
            </el-table-column>
            <el-table-column align="left" prop="" label="审核司机运费">
              {{ result.waybillAuditInfoVo.amendWeight }}
            </el-table-column>
            <el-table-column align="left" prop="" label="审核异常扣款">
              {{ result.waybillAuditInfoVo.amountLose }}
            </el-table-column>
            <el-table-column align="left" prop="" label="审核时间">
              {{ result.waybillAuditInfoVo.resultTime }}
            </el-table-column>
   
            <el-table-column align="left" label="审核附件">
              <el-button type="text" size="small"
                @click.native="goUrl(result.waybillAuditInfoVo.auditUrls)">点击查看附件</el-button>
            </el-table-column>
          </el-table>
        </div> -->
					</div>
				</div>
			</template>
		</div>
		<!-- 详情对话框 -->
		<el-dialog class="shippingDetail" title="货物明细" :visible.sync="dialogVisible" width="900px">
			<div class="NoDataBox" v-if="huowu.length == 0">
				<img class="NoData" src="../../assets/img/noData.png" alt="">
			</div>
			<div v-for="(item, i) in huowu" :key="i" style="margin-bottom: 15px;">
				<div class="mudiBox">
					<div class="mudi">目的地:</div>
					<div class="address">{{ item.title }}</div>
				</div>
				<div class="dialog_list">
					<el-table :data="item.orderCargoDetails" style="width: 100%" header-align="left">
						<el-table-column align="left" prop="" width="80" label="序号">
						</el-table-column>
						<el-table-column align="left" prop="cargoType" label="大类"></el-table-column>
						<el-table-column align="left" prop="cargoName" label="货物名称"></el-table-column>
						<el-table-column align="left" prop="cargoWeight" label="运量">
						</el-table-column>
						<el-table-column align="left" prop="brand" label="品牌">
						</el-table-column>
						<el-table-column align="left" prop="cargoVolume" label="规格">
						</el-table-column>
						<el-table-column align="left" prop="cargoQuantity" label="数量">
						</el-table-column>
						<el-table-column align="left" prop="description" label="备注">
						</el-table-column>
					</el-table>
				</div>
			</div>
		</el-dialog>

		<!-- 审核弹窗 -->
		<el-dialog class="dialog" title="运单审核" :visible.sync="visibleDialogBox" width="420px">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
				<el-form-item label="审核结果" prop="status">
					<el-radio-group v-model="ruleForm.status">
						<el-radio :label="3">合规</el-radio>
						<el-radio :label="2">有异常</el-radio>
						<el-radio :label="1">作废</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注" prop="cerInfo">
					<el-input type="textarea" resize="none" :rows="3" placeholder="请输入内容"
						v-model="ruleForm.cerInfo"></el-input>
				</el-form-item>
			</el-form>
			<div style="display: flex; justify-content: flex-end">
				<el-button class="cancelBtn" @click="visibleDialogBox = false">取 消</el-button>
				<el-button class="submitBtn" type="primary" @click="SubmitAudit()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import breadcrumb from "@/components/breadcrumb.vue";
	import titleVue from "@/components/titleVue.vue";
	import httpApi from "@/http";
	export default {
		data() {
			return {
				dialogVisible: false,
				huowu: [],
				result: {},
				orderInfoUpdateRecord: null,
				ruleForm: {
					status: "",
					cerInfo: "",
				},
				rules: {
					status: [{
						required: true,
						message: "请选择",
						trigger: "change"
					}],
					cerInfo: [{
						max: 200,
						message: "最大长度200 个字符",
						trigger: "blur"
					}],
				},
				visibleDialogBox: false,

				activeName: "first",
				waybillId: "",
				/* 联系发货人 前往出发地 到达出发地 完成装货 前往目的地 完成卸货 发起收款/完成订单 */
				stepsArr: [{
						stateValue: "0",
						label: "联系发货人",
						dateTime: "03-10 10:20",
					},
					{
						stateValue: "1",
						label: "前往出发地",
						dateTime: "03-10 10:20",
					},
					{
						stateValue: "2",
						label: "到达出发地",
						dateTime: "03-10 10:20",
					},
					{
						stateValue: "3",
						label: "完成装货",
						dateTime: "03-10 10:20",
						picArr: [{
								picSrc: "background.png",
								pid: "1",
							},
							{
								picSrc: "background.png",
								pid: "2",
							},
						],
					},
					{
						stateValue: "4",
						label: "前往目的地",
						dateTime: "03-10 10:20",
					},
					{
						stateValue: "5",
						label: "完成卸货",
						dateTime: "03-10 10:20",
						picArr: [{
								picSrc: "background.png",
								pid: "1",
							},
							{
								picSrc: "background.png",
								pid: "2",
							},
						],
					},
					{
						stateValue: "6",
						label: "发起收款/完成订单",
						dateTime: "03-10 10:20",
					},
				],
				records: [{
					updateFreightVolume: "10", // 司机修正运量
					determine: "15", // 审核确定运量
					examinefreight: "150.00元", // 审核司机运费

					Deduction: "5.00元", // 审核异常扣款
					time: "2022-03-20 10:20:30", // 审核时间
					// 司机上传附件
				}, ],
			};
		},
		methods: {
			showFile(e) {
				window.open(e);
			},
			tableHeaderStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:48px;paddingTop:8px;paddingBottom:8px;'
			},
			rowStyle({
				row,
				rowIndex
			}) {
				return 'tableRowStyleName'
			},
			// 审核弹框提交
			SubmitAudit() {
				let parmas = {
					resultInfo: this.ruleForm.cerInfo,
					waybillAuditResult: this.ruleForm.status,
					waybillId: this.waybillId,
				};
				////console.log(parmas);
				httpApi.selfOperatedWaybillApi.WaybillAudit(parmas).then((res) => {
					////console.log("结构", res);
					if (res.data.code == 200) {
						this.$message.success("审核成功");
						this.visibleDialogBox = false;
						this.getListOrder();
					} else {
						this.$message.error("审核失败");
					}
				});
			},
			//显示审核弹框
			isShowAudit() {
				this.$router.go(-1)
			},

			getListOrder() {
				this.waybillId = this.$route.params.waybillId;
				let params = {
					waybillId: this.waybillId
				};
				////console.log('详情请求传参', params);
				httpApi.carrierWaybillApi.getCarrierWaybillDetails(params).then((res) => {
					////console.log("详情结果res", res)
					if (res.data.code == 200) {
						this.result = res.data.data;
						this.orderInfoUpdateRecord = res.data.data.orderInfoUpdateRecord
						//console.log(this.orderInfoUpdateRecord, 1111)
						res.data.data.nodeInfoObject.forEach(item => {
							if (item.url != null && item.url != '') {
								// //console.log(item.url);
								item.url = item.url.split(',')

							}
						})

						// 地址字符串分隔为数组
						res.data.data.waySEAddressInfoVo.startAddress = res.data.data.waySEAddressInfoVo
							.startAddress.split(',')
						res.data.data.waySEAddressInfoVo.endAddress = res.data.data.waySEAddressInfoVo.endAddress
							.split(',')

						this.$refs.iframe.contentWindow.ToManualRoamFunc(
							this.result.wayAddressInfoVo.startLineInfoVos
						);
					}
				});
			},
			goUrl(url) {
				window.open(url, "_blank");
			},
			handleClick() {},
			// 显示货物明细
			showDialog() {
				this.dialogVisible = true;
				let params = {
					orderId: this.result.wayDetailInfoVo.orderId,
				}
				httpApi.carrierWaybillApi.cargoDetails(params).then(res => {
					//console.log('货物明细', res)
					this.huowu = res.data.data
				})

			},
		},
		mounted() {
			this.getListOrder();
		},
		components: {
			breadcrumb,
			titleVue,
		},
	};
</script>

<style lang="scss" scoped>
	.titleBox {
		flex: 1;
		background-color: #fff;
		height: 119px;
		display: flex;
		align-items: center;
		padding: 0 35px;
		margin-bottom: 9px;

		.icon-dingdan {
			font-size: 43px;
			margin-right: 10px;
		}

		.infoBox {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.info_line1 {
				margin-bottom: 3px;
				display: flex;
				align-items: center;

				>.tit {
					font-size: 18px;
					font-family: Microsoft YaHei;
					font-weight: bold;
					margin-right: 8px;
					color: #262626;
				}

				>.tag {
					background-color: #ecf5fe;
					border-radius: 4px;
					width: 54px;
					height: 20px;
					color: #1890ff;
					font-size: 10px;
					text-align: center;
					line-height: 20px;
				}
			}

			.info_line2 {
				display: flex;
				color: #939393;
				font-size: 12px;
			}
		}

		.examineBtn {
			background-color: #1890ff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			color: #ffffff;
			font-size: 12px;
			width: 80px;
			height: 36px;
			cursor: pointer;
			margin-left: auto;

			&:hover {
				opacity: 0.8;
				transition: 0.2s;
			}

			.icon-hetongguanli2 {
				font-size: 15px;
				margin-right: 6px;
				color: #ffffff;
			}
		}
	}

	.main {
		background-color: #fff;

		.mainTabs {
			::v-deep .el-tabs__nav {
				margin-left: 38px;
			}

			// 标签页切换按钮
			::v-deep .el-tabs__item {
				height: 50px;
				width: 88px;
				text-align: center;
				padding: 0;
				line-height: 50px;
				font-size: 12px;
				font-weight: bold;
				color: #939393;
			}

			// 下边框
			::v-deep .el-tabs__nav-wrap::after {
				height: 1px;
				background-color: #f0f0f0;
			}

			// 标签页切换按钮 激活样式
			::v-deep .el-tabs__item.is-active {
				background-color: #ecf5fe;
				color: #1890ff;
			}
		}

		.main_item {
			padding: 31px 30px 36px 30px;

			.descriptionsInfo {
				.picBox {
					width: 80px;
					height: 60px;
					border-radius: 6px;

					.pic {
						width: 80px;
						height: 60px;
					}
				}
			}

			.ShippingReceiving_head {
				width: 100%;
				display: flex;
				font-size: 12px;
				margin-bottom: 16px;

				.info_item {
					display: flex;

					.label {
						margin-right: 22px;
						color: #939393;
						height: 16px;
					}

					.value {
						display: flex;
						align-items: center;

						.text {
							color: #262626;
							height: 16px;
						}
					}
				}
			}
		}
	}

	// 下方主要信息模块 线路信息 节点信息 审核信息
	.infoMainBox {
		background-color: #fff;
		padding: 34px 30px 37px;

		.MapBox {
			width: 100%;
			height: 340px;
			margin-bottom: 36px;
		}

		// 线路信息步骤样式
		.steps {
			padding: 21px 32px;
			width: 100%;

			// 去组件默认样式
			::v-deep .el-step__icon.is-text {
				border: none;
			}

			// 修改 连接线颜色
			::v-deep .el-step.is-vertical .el-step__line {
				background-color: #c4c4c4;
				width: 2px;
			}

			.CircleDian {
				width: 8px;
				height: 8px;
				background: #c4c4c4;
				border-radius: 50%;

				&.activeStep {
					background: #1890ff;
					width: 10px;
					height: 10px;
				}
			}

			//发起人信息
			.stepTitle {
				font-size: 16px;
				color: #262626;
				height: 24px;
				margin-bottom: 4px;
			}

			//步骤内容
			.stepContent {
				width: 100%;

				.dateTime {
					font-size: 12px;
					color: #333333;
					height: 24px;
				}

				.picBox {
					display: flex;
					height: 60px;
					margin-bottom: 16px;

					.picTitle {
						height: 20px;
						color: #333333;
						font-size: 12px;
						margin-right: 4px;
					}

					.pic_item {
						display: flex;

						.pic {
							width: 80px;
							height: 60px;
							margin-right: 8px;
							border-radius: 6px;
						}
					}
				}
			}
		}

		// 审核信息样式
		.AuditInfoBox {
			.AuditInfo_head {
				display: flex;
				font-size: 12px;
				margin-bottom: 16px;
				flex-wrap: wrap;

				.info_item {
					display: flex;
					width: calc(100% / 3);
					line-height: 40px;

					.label {
						margin-right: 22px;
						color: #939393;
					}

					.value {
						display: flex;
						align-items: center;

						.iconStyle {
							font-size: 16px;
							margin-right: 4px;
						}

						.text {
							color: #262626;
							height: 16px;
						}
					}
				}
			}

			.list {

				// 表头样式
				::v-deep .el-table__header th {
					padding: 8.05px 0;
				}

				::v-deep .el-table__header th {
					background-color: #f5f5f5;
					color: #262626;
					font-size: 12px;
					font-weight: bold;
					text-align: left;

					// 表 body的td
					::v-deep .el-table__body td {
						color: #595959;
						font-size: 12px;
					}
				}
			}
		}
	}

	.shippingDetail {
		.NoDataBox {
			width: 100%;
			display: flex;
			align-items: center;
			height: 300px;
			justify-content: center;

			.NoData {
				height: 70%;
				width: 50%;
			}
		}

		::v-deep .el-dialog__body {
			padding: 35px 32px 80px 32px;
		}

		::v-deep .el-dialog__header {
			border-bottom: 1px solid #f0f0f0;
		}

		.mudiBox {
			display: flex;
			margin-bottom: 19px;

			.mudi {
				color: #939393;
				font-size: 12px;
				margin-right: 19px;
			}

			.address {
				color: #262626;
				font-size: 12px;
			}
		}

		.dialog_list {

			// 表头样式
			::v-deep .el-table__header th {
				padding: 8.05px 0;
			}

			::v-deep .el-table__header th {
				background-color: #f5f5f5;
				color: #262626;
				font-size: 12px;
				font-weight: bold;
				text-align: left;

				// 表 body的td
				::v-deep .el-table__body td {
					color: #262626;
					font-size: 12px;
				}
			}
		}
	}
</style>
<style lang="scss">
	.tableRowStyleName {
		color: #262626 !important;
		font-size: 12px;
		padding: 0px;
	}
</style>